<template>
	<view>
		<view class="margin">
			<view style="display: flex;justify-items: center;align-items: center;padding: 30rpx 0 ;">
				<view class="left-line  mr10"></view>
				<h4 class="size_17">中医视频课程</h4>
			</view>
			<!-- 列表 -->
			<view class="vList flex " style="flex-wrap: wrap;">
				<view class="vItem flex_row" v-for="(item,index) in videoList" :key="index"
					style="align-items: center;">
					<image class="mb9" :src="item.url" alt="" style="width: 216rpx;height: 174rpx;" />
					<text class="size_14 mb6">{{item.name}}</text>
					<text class="size_12">{{item.des}}</text>
				</view>
			</view>
			<video :src="url1" controls id="videoId" @play="play" @fullscreenchange="fullscreenchange">
			</video>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoList: [{
						url: "http://storage.dezhoucloud.com/img/hos/bg.png",
						name: "中医视频课程",
						des: "中西医结合内科导学"
					},
					{
						url: "http://storage.dezhoucloud.com/img/hos/bg.png",
						name: "中医视频课程",
						des: "中西医结合内科导学"
					},
					{
						url: "http://storage.dezhoucloud.com/img/hos/bg.png",
						name: "中医视频课程",
						des: "中西医结合内科导学"
					},
					{
						url: "http://storage.dezhoucloud.com/img/hos/bg.png",
						name: "中医视频课程",
						des: "中西医结合内科导学"
					},
					{
						url: "http://storage.dezhoucloud.com/img/hos/bg.png",
						name: "中医视频课程",
						des: "中西医结合内科导学"
					},
					{
						url: "http://storage.dezhoucloud.com/img/hos/bg.png",
						name: "中医视频课程",
						des: "中西医结合内科导学"
					},
					{
						url: "http://storage.dezhoucloud.com/img/hos/bg.png",
						name: "中医视频课程",
						des: "中西医结合内科导学"
					},
					{
						url: "http://storage.dezhoucloud.com/img/hos/bg.png",
						name: "中医视频课程",
						des: "中西医结合内科导学"
					},
					{
						url: "http://storage.dezhoucloud.com/img/hos/bg.png",
						name: "中医视频课程",
						des: "中西医结合内科导学"
					},
					{
						url: "http://storage.dezhoucloud.com/img/hos/bg.png",
						name: "中医视频课程",
						des: "中西医结合内科导学"
					},
					{
						url: "http://storage.dezhoucloud.com/img/hos/bg.png",
						name: "中医视频课程",
						des: "中西医结合内科导学"
					},
					{
						url: "http://storage.dezhoucloud.com/img/hos/bg.png",
						name: "中医视频课程",
						des: "中西医结合内科导学"
					},
					{
						url: "http://storage.dezhoucloud.com/img/hos/bg.png",
						name: "中医视频课程",
						des: "中西医结合内科导学"
					},
					{
						url: "http://storage.dezhoucloud.com/img/hos/bg.png",
						name: "中医视频课程",
						des: "中西医结合内科导学"
					},
					{
						url: "http://storage.dezhoucloud.com/img/hos/bg.png",
						name: "中医视频课程",
						des: "中西医结合内科导学"
					},
				],
				url1: "/static/video.mp4",
				videoContext: ''
			};
		},
		methods: {
			// 播放时进入全屏
			play(index) {
				let videoContext = uni.createVideoContext('videoId', this)
				videoContext.requestFullScreen()
				this.videoContext = videoContext
			},

			//退出全屏时暂停
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					uni.createVideoContext('videoId', this).pause();
				}
			},
			//退出全屏时停止
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					this.videoContext.stop()
				}
			}
		}
	}
</script>

<style lang="scss">
	.vItem {
		margin-bottom: 22rpx;
	}

	/* margin */
	.mb9 {
		margin-bottom: 18rpx;
	}

	.mb6 {
		margin-bottom: 12rpx;
	}

	.mb9 {
		margin-bottom: 18rpx;
	}

	.mb21 {
		margin-bottom: 42rpx;
	}

	.mt24 {
		margin-top: 48rpx;
	}

	.mb7 {
		margin-bottom: 14rpx;
	}

	.mb45 {
		margin-bottom: 90rpx;
	}

	.mb33 {
		margin-bottom: 66rpx;
	}

	.or {
		width: 690rpx;
		height: 104rpx;
		background: #FFEEE8;
		border-radius: 10rpx;
		opacity: 1;
	}

	.te {
		width: 642rpx;
		height: 62rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #F8662D;
		line-height: 36rpx;
	}


	.demo-layout {
		height: 80rpx;
		border-radius: 10rpx;
		margin-top: 6rpx;
	}

	.bg-purple {
		background: #CED7E1;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.active {
		color: #FFFFFF;
		background-color: #7976E9;
	}


	/* 弹框黑 */
	.tBlack {
		// width: 164rpx;
		// height: 34rpx;
		font-size: 32rpx;
		font-family: Arial-Bold, Arial;
		font-weight: bold;
		color: #161616;
		line-height: 46rpx;
		// -webkit-background-clip: text;
		// -webkit-text-fill-color: transparent;
	}

	/* 张三 */
	.san {
		// width: 616rpx;
		// height: 28rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #161616;
		line-height: 46rpx;
		// -webkit-background-clip: text;
		// -webkit-text-fill-color: transparent;
	}

	/* 挂号橙 */
	.gOrange {
		// width: 194rpx;
		// height: 28rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #F8662D;
		line-height: 46rpx;
		// -webkit-background-clip: text;
		// -webkit-text-fill-color: transparent;
	}

	/* grey */
	.grey {
		width: 190rpx;
		height: 100rpx;
		background: #F5F5F5;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
	}

	.black {
		width: 190rpx;
		height: 100rpx;
		background: #F5F5F5;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
	}

	.purple {
		width: 190rpx;
		height: 100rpx;
		background: #F4F3FF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		border: 2rpx solid #7976E9;
	}

	.yesBtn {
		width: 640rpx;
		height: 90rpx;
		background: #7976E9;
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		opacity: 1;
	}
</style>